<template>
  <div class="music-item" @click="playCurrentMusic(props.musicDetail.id)">
    <div class="music-item_img">
      <img :src="`${props.musicDetail.al.picUrl}?param=200y200`" alt="" />
    </div>
    <div class="music-item_info">
      <b>{{ props.musicDetail.name }}</b>
      <p>By：{{ props.musicDetail.ar[0].name }} - {{ props.musicDetail.name }}</p>
      <span>{{ props.musicDetail.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ISearchSongItem } from "@/types/music/searchSongType";
import { ref } from "vue";

const props = defineProps<{
  musicDetail: ISearchSongItem;
}>();

const emit = defineEmits<{
  (e: "playMusic", id: number): void;
}>();

const playCurrentMusic = (id: number) => {
  emit("playMusic", id);
};
</script>

<style scoped lang="scss">
.music-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  &_img {
    position: relative;
    width: 95px;
    height: 130px;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
    border-radius: 10px;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &_info {
    height: 130px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    b {
      font-size: 18px;
      line-height: 20px;
    }
    p {
      color: #999;
      font-size: 14px;
      margin: 12px 0;
    }
    span {
      padding: 4px 8px;
      font-size: 10px;
      background: #eee;
      border-radius: 8px;
      font-weight: 700;
      color: #444;
    }
  }
}
</style>
